<template>
  <div>

    <el-row>
      <el-col :span="2">
        &nbsp
      </el-col>
      <el-col :span="8" id="Coach1">
        <div id="MyCenter-1">
          <i class="el-icon-user"></i>我的简历
          <el-button @click="showRemuse()" v-if="CoachResume.image==null" type="warning" size="small">上传简历</el-button>
        </div>
        <el-card :body-style="{ padding: '0px' }">
          <img :src="CoachResume.image" class="image" alt="暂无信息 请完善信息">
          <div style="padding: 14px;">
            <div>
              姓名：<span>{{ CoachResume.name }}</span>&nbsp
              性别：<span>{{CoachResume.gender ==1?"男":"女"}}</span>&nbsp
              年龄：<span>{{CoachResume.age }}</span>&nbsp
            </div>
            <div class="bottom clearfix">
              <i class="el-icon-mobile-phone"></i>手机号码：
              <span class="time">{{CoachResume.phone}}</span>
              &nbsp&nbsp&nbsp
              <i class="el-icon-s-home"></i>
              住址：{{CoachResume.address}}<br />
            </div>
            <div>
              学历：{{ CoachResume.education}}&nbsp&nbsp
              毕业院校：{{CoachResume.graduate}}<br>
              工作履历：{{CoachResume.jobResume}}<br />
            </div>
          </div>
        </el-card>

      </el-col>

      <el-col :span="1">
        &nbsp
      </el-col>

      <el-col :span="8">
        <div>

          <el-card :body-style="{ padding: '0px' }">
            <i class="el-icon-trophy"></i>
            <img :src="CoachResume.cardImage" class="image" alt="暂无信息 请完善信息">
            <img :src="CoachResume.honor" class="image" alt="暂无信息 请完善信息">
            <div style="padding: 14px;">
            </div>
          </el-card>


        </div>
      </el-col>



      <el-dialog title="请填写简历信息" :visible.sync="showUpdate" width="35%">

        <el-form :model="form" ref="form" label-width="120px" :rules="rules">
          <el-form-item label="照片" prop="image">
            <el-upload class="upload-demo" action="http://localhost:9091/account/yCoachResume/addCoachResume"
              :auto-upload="false" :on-change="handleImageChange" :file-list="fileList.image">
              <el-button size="small" type="primary">选取照片</el-button>
            </el-upload>
          </el-form-item>

          <el-form-item label="执业证书" prop="cardImage">
            <el-upload class="upload-demo" action="http://localhost:9091/account/yCoachResume/addCoachResume"
              :auto-upload="false" :on-change="handleCardImageChange" :file-list="fileList.cardImage">
              <el-button size="small" type="primary">选取执业证书</el-button>
            </el-upload>
          </el-form-item>

          <el-form-item label="获奖证书" prop="honor">
            <el-upload class="upload-demo" action="http://localhost:9091/account/yCoachResume/addCoachResume"
              :auto-upload="false" :on-change="handleHonorChange" :file-list="fileList.honor">
              <el-button size="small" type="primary">选取获奖证书</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="工作经历" prop="jobResume">
            <el-input type="textarea" v-model="form.jobResume"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model="form.age"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item label="学历" prop="education">
            <el-input v-model="form.education"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-select v-model="form.gender" placeholder="请选择">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="毕业院校" prop="graduate">
            <el-input v-model="form.graduate"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
        <el-button @click="showUpdate = false" type="danger" round>取 消</el-button>
      </el-dialog>

    </el-row>


  </div>
</template>

<script>
  export default {
    name: "MyRemuse",
    data() {
      return {
        showUpdate: false,
        CoachResume: {},
        form: {
          //个人照片
          image: null,
          //职业证书招聘
          cardImage: null,
          //获奖证书
          honor: null,
          //工作简历
          jobResume: '',
          //年龄
          age: "",
          //地址
          address: '',
          //学历
          education: '',
          //性别
          gender: '',
          //毕业院校
          graduate: ''
        },
        fileList: {
          image: [],
          cardImage: [],
          honor: []
        },
        //判断是否每栏都已填写信息
        rules: {
          image: [{
            required: true,
            message: '请上传照片',
            trigger: 'change'
          }],
          cardImage: [{
            required: true,
            message: '请上传执业证书',
            trigger: 'change'
          }],
          honor: [{
            required: true,
            message: '请上传获奖证书',
            trigger: 'change'
          }],
          jobResume: [{
            required: true,
            message: '请输入工作经历',
            trigger: 'blur'
          }],
          age: [{
            required: true,
            message: '请输入年龄',
            trigger: 'blur'
          }],
          address: [{
            required: true,
            message: '请输入地址',
            trigger: 'blur'
          }],
          education: [{
            required: true,
            message: '请输入学历',
            trigger: 'blur'
          }],
          gender: [{
            required: true,
            message: '请选择性别',
            trigger: 'change'
          }],
          graduate: [{
            required: true,
            message: '请输入毕业院校',
            trigger: 'blur'
          }]
        }
      };
    },
    methods: {
      //查询自己的简历
      loadCoachResume() {
        this.$http.get("account/yCoachResume/loadCoachResume").then(resp => {
          this.CoachResume = resp.data.data;
        });
      },
      //展示新增窗口
      showRemuse() {
        this.showUpdate = true;
      },
      //照片
      handleImageChange(file) {
        this.form.image = file.raw;
        this.fileList.image = [file];
      },
      ////职业证书招聘
      handleCardImageChange(file) {
        this.form.cardImage = file.raw;
        this.fileList.cardImage = [file];
      },
      //获奖证书
      handleHonorChange(file) {
        this.form.honor = file.raw;
        this.fileList.honor = [file];
      },
      async submitForm() {
        //使用Vue.js的 $refs属性来访问表单，并调用了表单的 validate。validate 方法接收一个回调函数，这个回调函数接收一个参数 valid，用于表示表单是否通过验证。这里的 async 关键字表明回调函数是一个异步函数。
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            //创建一个 FormData 对象，用于发送表单数据
            const formData = new FormData();
            //将表单中的照片数据添加到 FormData 对象中。
            formData.append('image', this.form.image);
            formData.append('cardImage', this.form.cardImage);
            formData.append('honor', this.form.honor);
            formData.append('jobResume', this.form.jobResume);
            formData.append('age', this.form.age);

            formData.append('age', this.form.age);
            formData.append('address', this.form.address);
            formData.append('education', this.form.education);
            formData.append('gender', this.form.gender.toString());
            formData.append('graduate', this.form.graduate);
            try {
              this.$http.post('account/yCoachResume/addCoachResume', formData, {
                headers: {
                  'token': localStorage.getItem('token')
                }
              });
              if (response.data.code === 200) {

                this.resetForm();
              } else {
                this.$message.error(response.data.msg);
              }
            } catch (error) {
              this.$message.success('新增教练简历成功');
              this.showUpdate = false;

            }
          } else {
            this.$message.error('请完善表单信息');
          }
        });
      },
      resetForm() {

        this.$refs.form.resetFields();
        this.fileList.image = [];
        this.fileList.cardImage = [];
        this.fileList.honor = [];
      }
    },
    created() {
      this.loadCoachResume();
    }
  };
</script>

<style>
  .upload-demo {
    width: 200px;
    margin-bottom: 20px;
  }

  .image {
    width: 100%;
    height: 450px;
    display: block;
  }
</style>
